<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型">
                        <auto-search-entrust v-model="condition['search_LIKE_containerType']"
                                             :name="condition['search_LIKE_containerType']"></auto-search-entrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸">
                        <auto-search-size v-model="condition['search_EQ_containerSize']"
                                          :name="condition['search_EQ_containerSize']"></auto-search-size>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="内外贸">
                        <el-select v-model="condition['search_EQ_tradeType']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="空重">
                        <el-select v-model="condition['search_EQ_ef']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船代">
                        <auto-search-custom @selectName="v=>condition['search_LIKE_shipAgentName']=v"
                                            :name="condition['search_LIKE_shipAgentName']"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="中转">
                        <el-select v-model="condition['search_EQ_change']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictOneOrZero" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="提单号">
                        <el-input v-model="condition['search_LIKE_billNumber']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="装货港：" prop="loadPort">
                        <auto-search-port-station 
                            @selectCode="v=>condition['search_EQ_loadPort']=v"
                            v-model="condition['search_EQ_loadPort']">
                            </auto-search-port-station>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" class="ml-80" @click="loadData">查询</el-button>
                    <el-button @click="handleExport">导出Excel</el-button>
                    <el-button @click="handlePrint(status)">套打</el-button>
                    <el-button @click="handleNewPrint(status)">打印</el-button>
                    <el-checkbox v-model="checked">中转箱分开打印</el-checkbox>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="table" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="120">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="getRecordDetail(scope.row)">
                        {{ scope.row.containerId }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="change" label="中转"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.change | _filterIsChange }}
                </template>
            </el-table-column>
            <el-table-column v-if="type" prop="enchaseWay" label="装箱方式"  min-width="110">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.enchaseWay!='GZ'" size="small" type="text" @click="goDetail(scope.row)">
                        {{ scope.row.enchaseWay | _filterEnchaseWayType }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column v-if="!type" prop="enchaseWay" label="装箱方式"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.enchaseWay | _filterEnchaseWayType }}
                </template>
            </el-table-column>
            <el-table-column prop="sealNo" label="铅封号"  min-width="100"></el-table-column>
            <el-table-column prop="billNumber" label="提单号"  min-width="140"></el-table-column>
            <el-table-column prop="loadPort" label="装货港"  min-width="100"></el-table-column>
            <el-table-column v-if="type" prop="loadPosition" label="装船位置"  min-width="140"></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="80"></el-table-column>
            <el-table-column prop="cargoCount" label="件数"  min-width="80"></el-table-column>
            <el-table-column prop="cargoWeight" label="货重"  min-width="80"></el-table-column>
            <el-table-column prop="containerWeight" label="箱货重"  min-width="100"></el-table-column>
            <el-table-column prop="isDamaged" label="残损"  min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.isDamaged | _filterTrueOrFalse }}
                </template>
            </el-table-column>
            <el-table-column v-if="!type" prop="isSendCustoms" label="海关放行"  min-width="140">
                <template slot-scope="scope">
                    {{ scope.row.isSendCustoms | _filterOneOrZero }}
                </template>
            </el-table-column>
            <el-table-column v-if="!type" prop="isPass" label="拆提放行"  min-width="140">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.isPass!='1'" size="small" type="text" @click="goUnDetail(scope.row)">
                        {{ scope.row.isPass | _filterOneOrZero }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="140"></el-table-column>
            <el-table-column prop="accountUnit" label="付费单位"  min-width="140"></el-table-column>
            <el-table-column prop="accountUnit" label="船公司"  min-width="140"></el-table-column>
            <el-table-column prop="tallyClerk" label="理货人"  min-width="140"></el-table-column>
            <el-table-column prop="tallyRemark" label="备注"  min-width="140"></el-table-column>
            <el-table-column prop="tallyTime" label="理货时间"  min-width="160"></el-table-column>
        </el-table>
        <record-detail v-if="recordDetail" @close="recordDetail=false" ref="recordDetail"></record-detail>
        <load-detail-form v-if="dialogForm" ref="loadDetailForm"></load-detail-form>
        <unbox-detail-form v-if="unForm" ref="unboxDetailForm"></unbox-detail-form>
    </div>
</template>

<script>
    import loadDetailForm from '../loadDetailForm'
    import unboxDetailForm from '../unReportDetail'
    import { shipPlanDetail,getCargoPlan } from "@/api/shipPlan/shipPlan";
    import { getPlanId } from '@/api/planList/planList.js'
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import autoSearchPortStation from '@/components/autocomplete/autoSearchPortStation'
    import { newExportExcel } from "@/utils/newExport";
    import {ifHeavyType,tradeType,isChange,enchaseWayType,isDamagedType} from "../../../../assets/dict";
    import recordDetail from '../recordDetail'
    export default {
        name: "detail",
        components: {
            autoSearchEntrust, autoSearchSize, autoSearchCustom,recordDetail,loadDetailForm, unboxDetailForm,autoSearchPortStation
        },
        props:{
            type:{
                type:Boolean,
                required:true
            },
            status:null
        },
        data() {
            return {
                table: [],
                condition: {search_LIKE_containerId: sessionStorage.getItem('ContainerId' || '')},
                checked: true,
                recordDetail: false,
                id:'',
                dialogForm: false,
                unForm: false
            }
        },
        mounted() {
            // this.loadData()
        },
        activated() {
            // this.loadData()
        },
        methods: {
            loadData() {
                if(sessionStorage.getItem('ContainerId')) {
                    this.condition.search_LIKE_containerId = sessionStorage.getItem('ContainerId')
                }else{
                    this.condition.search_LIKE_containerId = ''    
                }
                let params = this.$assist.copySearchConditions(this.condition)
                shipPlanDetail(this.id, params).then(res => {
                    this.table = res.data.aaData
                })
            },
            handlePrint(status) {
                if (status == 'ONE' || status == 'TWO'){
                    this.$message({
                        message: '该船没有理箱完成,请在平板上点击"理完"',
                        type: 'warning'
                    })
                    return
                }
                localStorage.setItem('dDatas',JSON.stringify(this.table))
                const origin = window.location.origin + window.location.pathname
                const route = "#/DetailPrint/"
                window.open(`${origin}${route}${this.id}?checked=${this.checked}`);
            },
            handleNewPrint(status) {
                if (status == 'ONE' || status == 'TWO'){
                    this.$message({
                        message: '该船没有理箱完成,请在平板上点击"理完"',
                        type: 'warning'
                    })
                    return
                }
                localStorage.setItem('dDatas',JSON.stringify(this.table))
                const origin = window.location.origin + window.location.pathname
                const route = "#/newDetailPrint/"
                window.open(`${origin}${route}${this.id}?checked=${this.checked}`);
            },
            getRecordDetail(item){
                this.recordDetail=true
                this.$nextTick(()=>{
                    this.$refs.recordDetail.loadData(item.tallyDetailId)
                })
            },
            handleExport() {
                let map = new Map();
                map.set("index", "序号")
                map.set("containerId","箱号")
                map.set("containerType","箱型")
                map.set("containerSize","尺寸")
                map.set("tradeType","内外贸")
                map.set("ef","空重")
                map.set("change","中转")
                map.set("enchaseWay","装箱方式")
                map.set("sealNo","铅封号")
                map.set("billNumber","提单号")
                map.set("loadPosition","装船位置")
                map.set("cargoName","货名")
                map.set("cargoCount","件数")
                map.set("cargoWeight","货重")
                map.set("containerWeight","箱货重")
                map.set("isDamaged","残损")
                map.set("shipAgentName","船代")
                map.set("accountUnit","付费单位")
                map.set("accountUnit","船公司")
                map.set("tallyClerk","理货人")
                map.set("tallyRemark","备注")
                map.set("tallyTime","理货时间")
                let exportRecords = [];
                let exportArr = JSON.parse(JSON.stringify(this.table));
                exportArr.forEach((record, index) => {
                    let exportRecord = {};
                    for (let [key, value] of map.entries()) {
                        if (key === "index") {
                            record[key] = Number(index)+1
                        }
                        if (key === "ef") {
                            record[key] = ifHeavyType.get(record[key]);
                        }
                        if (key === "tradeType") {
                            record[key] = tradeType.get(record[key]);
                        }
                        if (key === "change") {
                            record[key] = isChange.get(record[key]);
                        }
                        if (key === "enchaseWay") {
                            record[key] = enchaseWayType.get(record[key]);
                        }
                        if (key === "isDamaged") {
                            record[key] = isDamagedType.get(record[key]);
                        }
                        exportRecord[value] = record[key];
                    }
                    exportRecords.push(exportRecord);
                });
                newExportExcel("明细报告", exportRecords);
            },
            goDetail(row){
                let params = {
                    search_EQ_shipName: row.shipName,
                    search_EQ_voyage: row.voyage,
                    search_EQ_containerId: row.containerId,
                    search_EQ_planType: 'ZX',
                }
                getCargoPlan(params).then(res =>{
                    getPlanId(res.data.planId).then(dts => {
                        this.dialogForm = true
                        this.$nextTick(() => {
                            this.$refs.loadDetailForm.dialogForm = true
                            let form = JSON.parse(JSON.stringify(dts.data))
                            delete form.records
                            this.$refs.loadDetailForm.form = form
                            this.$refs.loadDetailForm.table = dts.data.records
                        })
                    })
                })
            },
            goUnDetail(row){
                let params = {
                    search_EQ_shipName: row.shipName,
                    search_EQ_voyage: row.voyage,
                    search_EQ_containerId: row.containerId,
                    search_EQ_planType: 'CX',
                }
                getCargoPlan(params).then(res =>{
                    getPlanId(res.data.planId).then(dts => {
                        this.unForm = true
                        this.$nextTick(() => {
                            this.$refs.unboxDetailForm.unForm = true
                            let form = JSON.parse(JSON.stringify(dts.data))
                            delete form.records
                            this.$refs.unboxDetailForm.form = form
                            this.$refs.unboxDetailForm.table = dts.data.records
                        })
                    })
                })
            }
        },
    }
</script>

<style scoped>

</style>
